<template>
	<view class="container page" v-if="info">
		<view class="header-top mar-t-10">
			<view class="font-color-fff text-middle tq-text-line1">
				<text class="font-size-15">预约咨询师：</text>
				<text class="font-size-16">{{info.counselor_name}}</text>
			</view>
			<view class="font-color-fff text-middle tq-text-line1 mar-t-20">
				<text class="font-size-15">预约时间：</text>
				<text class="font-size-16">{{transformTime(info.start_time)}}</text>
			</view>
		</view>
		<view class="pj-card pad-t-15 pad-b-20 mar-t-20">
			<view class="pt-top flex text-middle align-center">
				<view class="font-size-16 font-bold font-color-9b">
					<text>综合评分</text>
				</view>
				<view class="flex-1 pj-rate">
					<htz-rate v-model="score_info.zhpf"></htz-rate>
				</view>
			</view>
			<view class="pt-top flex text-middle align-center mar-t-10">
				<view class="font-size-16 font-bold font-color-9b">
					<text>服务评分</text>
				</view>
				<view class="flex-1 pj-rate">
					<htz-rate v-model="score_info.fwpf"></htz-rate>
				</view>
			</view>
			<view class="pt-top flex text-middle align-center mar-t-10">
				<view class="font-size-16 font-bold font-color-9b">
					<text>帮助评分</text>
				</view>
				<view class="flex-1 pj-rate">
					<htz-rate v-model="score_info.bzpf"></htz-rate>
				</view>
			</view>

			<view class="remark mar-t-30 font-size-16">
				<textarea placeholder-style="color:#888;" placeholder="请输入评价内容..." v-model="remark" />
			</view>
			<view class="flex mar-t-15 justify-end">
				<checkbox-group @change="checkboxChange">
					<label class="flex align-end">
						<checkbox  :value="anonymous"  :checked="anonymous=='yes'" />匿名
					</label>
				</checkbox-group>
			</view>
		</view>
		<!-- <view class="pos-rel">
			<view class="pos-abs" style="right:0;top:15px">
				<switch checked @change="switch1Change" size="14" style="height:10px" />
				<text>匿名</text>
			</view>
		</view>-->
		<view class="tipText font-size-14 font-color-999 text-center">
			报名、签到、评价各得5积分，当天最高不得超过20分
		</view>
		<button class="footer" @click="sub" :loading="loading" :disabled="loading">确认提交</button>
	</view>
</template>

<script>
import htzRate from '@/components/htz-rate'
import { userOrdersInfo,evaluateCreate } from '@/utils/http'
export default {
	data() {
		return {
			type: '',
			id:'',
			info:'',
			order_no:'',
			score_info: { zhpf: 0, fwpf: 0, bzpf: 0 },
			remark: '',
			anonymous:'no',
			loading:false
		}
	},
	components: {
		htzRate
	},
	methods: {
		checkboxChange(e){
			let current_anonymous = this.anonymous;
			this.anonymous = current_anonymous == 'no' ? 'yes':'no';
		},
		sub() {
			const _that = this
			this.loading = true
			evaluateCreate({
				type: this.type,
				order_no: this.order_no,
				score_info: JSON.stringify(this.score_info),
				remark: this.remark,
				anonymous:this.anonymous
			}).then(res => {
				if (res) {
					this.loading = false
					this.successToShow('评价成功', function() {
						_that.redirect('/pages/order/index')
						// uni.navigateBack({
						// 	delta:1
						// })
					})
				}
			}).finally(res=>{
				this.loading = false
			})
		},
		  userOrdersInfo(){
            userOrdersInfo({order_no:this.order_no}).then(res=>{
                if(res){
                    this.info = res;
                }
            })
        },
	},
	onLoad(options) {
		this.type = options.type
		this.order_no = options.order_no
		this.userOrdersInfo();
	}
}
</script>

<style scoped>
.header-top {
	padding: 12px 20px;
	background-color: #376eff;
	border-radius: 9px;
}
.pj-card {
	padding-left: 20px;
	padding-right: 20px;
	box-shadow: 1px 2px 5px 1px rgba(241, 237, 237, 0.884);
}
.pj-card .pj-rate {
	margin-left: 30px;
}
.remark textarea {
	width: auto !important;
	padding: 15px 8px;
	border: 1px solid #bbbbbb;
	border-radius: 5px;
}
</style>